<template>
	<div class="classify">
		<ul class="classify-list">
			<li class="classify-item">门票</li><li class="classify-item">热销组合</li><li class="classify-item">景区服务</li><li class="classify-item">一日游</li>
		</ul>
		<div class="classify-bottomlist">
			<div class="classify-top">
				<p><span></span>兵马俑+华清宫</p>
			</div>
			<ul class="classify-bottom-list">
				<li class="classify-bottom-item">
					<div class="classify-item-left">
						<p class="ticket"><span>【提前一天】成人联票</span>
						温馨提示:带好本人的二代身份证取票、兵马俑距离华清宫7.4公里，建议您乘车前往。</p>
					</div>
					<div class="classify-item-right">
						<p>￥<em class="price">208</em><span>起</span><span class="iconfont iconjiantouarrow486"></span></p>
					</div>
				</li>
				<li class="classify-bottom-item">
					<div class="classify-item-left">
						<p class="ticket"><span>【提前一天】成人联票</span>
						温馨提示:带好本人的二代身份证取票、兵马俑距离华清宫7.4公里，建议您乘车前往。</p>
					</div>
					<div class="classify-item-right">
						<p>￥<em class="price">208</em><span>起</span><span class="iconfont iconjiantouarrow486"></span></p>
					</div>
				</li>
			</ul>
		</div>
		<div class="classify-bottomlist">
			<div class="classify-top">
				<p><span></span>兵马俑+华清宫</p>
			</div>
			<ul class="classify-bottom-list">
				<li class="classify-bottom-item">
					<div class="classify-item-left">
						<p class="ticket"><span>【提前一天】成人联票</span>
						温馨提示:带好本人的二代身份证取票、兵马俑距离华清宫7.4公里，建议您乘车前往。</p>
					</div>
					<div class="classify-item-right">
						<p>￥<em class="price">208</em><span>起</span><span class="iconfont iconjiantouarrow486"></span></p>
					</div>
				</li>
				<li class="classify-bottom-item">
					<div class="classify-item-left">
						<p class="ticket"><span>【提前一天】成人联票</span>
						温馨提示:带好本人的二代身份证取票、兵马俑距离华清宫7.4公里，建议您乘车前往。</p>
					</div>
					<div class="classify-item-right">
						<p>￥<em class="price">208</em><span>起</span><span class="iconfont iconjiantouarrow486"></span></p>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>
<script>
	export default{

	}
</script>
<style scoped>
	.classify{
		line-height: 0;
	}
	.classify-list{
		overflow-x:scroll;
		white-space: nowrap;
		border-bottom: 1px solid #e0e0e0; 
		background-color: #fff;
	}	
	.classify-item{
		width: 2rem;
		display: inline-block;
	    height: .92rem;
	    line-height: .96rem;
	    text-align: center;
	    font-size: .32rem;
	}
	.classify-top p span{
		display: inline-block;
	    position: absolute;
	    width: .36rem;
	    height: .36rem;
	    top: .26rem;
	    left: .2rem;
	    background: url(//s.qunarzz.com/piao/image/touch/sight/detail.png) 0 -.45rem no-repeat;
	    margin-right: .1rem;
	    background-size: .4rem 3rem;
	}
	.classify-top p{
		height: .88rem;
	    line-height: .88rem;
	    text-indent: .36rem;
	    font-size: .32rem;
	    background: #fff;
	    color: #333;
	    padding: 0 .4rem;
	    position: relative;
	}
	.ticket{
		font-size: .24rem;
	    color: #888;
	    line-height: .32rem;
	    display: -webkit-box;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    -webkit-line-clamp: 2;
	    -webkit-box-orient: vertical;
	}
	.ticket span{
		margin-right: .1rem;
	    line-height: .52rem;
	    padding: 0;
	    color: #333;
    	font-size: .3rem;
	}
	.classify-bottom-item{
		padding: .2rem .2rem .24rem 0;
		border-top: 1px solid #dadada;
		overflow: hidden;
		display: flex;
	}
	.classify-bottom-list{
	    margin-bottom: .2rem;
    	padding-left: .2rem;
    	overflow: hidden;
	}
	.classify-item-left{
		line-height: 0;
		float: left;
	}
	.classify-item-right{
		float: left;
		padding: .3rem 0 .3rem .3rem;
	}
    .classify-item-right p{
    	color: #ff9800;
    	font-size: .24rem;
	    line-height: .28rem;
	    text-align: center;
    }
    .classify-item-right p span{
    	color: #9e9e9e;
   		font-size: .24rem;
    }
    .price{
    	margin-left: .04rem;
	    font-size: .4rem;
	    line-height: .4rem;
    }
    .classify-bottomlist{
    	margin-bottom: .2rem;
		background-color: #fff;
    }
</style>